import styles from './index.module.scss'
import Types from 'prop-types'
// 优化类名处理库，降维拼接类名，传入的类名，有几个拼几个，不传不拼
import classnames from 'classnames'
// 封装文本框组件，extra额外的，...rest初始input样式
const Input = ({ extra, onExtraClick,dom, className, ...rest }) => {
  return (
    <div className={styles.root}>
      <input
        className={classnames('geek-input', className)}
        ref={dom}
        // className={className ? `geek-input ${className}` : 'geek-input'}
        // 初始属性
        {...rest}
      />
      {extra && (
        <span className="extra-text" onClick={onExtraClick}>
          {extra}
        </span>
      )}
    </div>
  )
}
Input.propTypes = {
  extra: Types.string,
  onExtraClick: Types.func,
  className: Types.string,
}
export default Input
